<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Cloud Config</title>

    <!-- Bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

    <link href="lib/metro-bootstrap/css/metro-bootstrap.min.css" rel="stylesheet"/>

    <link href="css/main.css" rel="stylesheet"/>


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <div class="row">

            <div class="col-md-8 col-md-offset-2">
                <div class="row" style="margin-top: 200px">
                    <div id="searchDiv" class="col-md-12" style="background-color: #c2c2c2;">
                        <input class="form-control search-input" id="inputPkgName" placeholder="包名" v-model="pkgFullName" @input="search"/>
                        <div class="row search-result" id="resultDiv">
                            <v-template v-if="results.length>0">
                                <div class="col-md-5 search-result-item" v-for="result in results" @click="toPkg(result.pkgFullName)">
                                    <table width="100%" height="100%">
                                        <tr>
                                            <td align="right">所属组织：</td>
                                            <td>{{result.groupId}}</td>
                                        </tr>
                                        <tr>
                                            <td align="right">工程名：</td>
                                            <td>{{result.artifactId}}</td>
                                        </tr>
                                        <tr>
                                            <td align="right">版本：</td>
                                            <td>{{result.versionId}}</td>
                                        </tr>
                                        <tr>
                                            <td align="right">包类型：</td>
                                            <td>{{result.packaging}}</td>
                                        </tr>
                                    </table>
                                </div>
                            </v-template>
                        </div>

                    </div>

                </div>

            </div>

            <!--<div class="col-md-8 col-md-offset-2" style="margin-top: 100px;">
                <div id="cloudSvg" class="col3" >

                </div>
                <div  class="col5" style="padding-top: 100px;font-size: 50px">
                        +
                </div>
                <div id="pkgSvg" class="col3" >

                </div>
              &lt;!&ndash;  <div id="progressBar">
                </div>&ndash;&gt;

            </div>-->
        </div>
    </div>

    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/raphael/raphael.min.js"></script>
    <script src="lib/progressStep/progressStep.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <!--vivus-->
    <script src="lib/vivus/vivus.min.js"></script>
    <!--lodash-->
    <script src="lib/lodash/lodash.min.js"></script>
    <!--vue-->
    <script src="lib/vue/vue.min.js"></script>

    <script src="js/common.js"></script>
    <script>


        var debounced =_.debounce(function(vueObj){
            var that = vueObj;
            $.ajax({
                url:serverUrl+rootPath+"/pkg/list/"+that.pkgFullName,
                asnyc:true,
                dataType:"json",
                crossDomain:true,
                data:null,
                type:"post",
                success:function(data){
                    that.results = data;
                    if(data && data.length >0){
                        that.showResultDiv();
                    }else{
                        that.hideResultDiv();
                    }

                }

            });
        },800,{
            "maxWait":2000
        });
        //vivus svg
        /*var cloudSvg = new Vivus('cloudSvg', {
            file: "img/cloud.svg",
            type: 'oneByOne',
            duration: 1000
        });
        var pkgSvg = new Vivus('pkgSvg', {
            file: "img/pkg.svg",
            type: 'oneByOne',
            duration: 1000
        });*/
        //
        var searchDivApp = new Vue({
            el:"#searchDiv",
            data:{
                pkgFullName:null,
                results:[]
            },
            methods:{
                search:function(){
                    if(this.pkgFullName){
                        debounced(this);
                    }else{
                        this.results = [];
                        this.hideResultDiv();
                    }

                },
                showResultDiv:function(){
                    $('#resultDiv').show();

                },
                hideResultDiv:function(){
                    $('#resultDiv').hide();
                },
                toPkg:function(pkgFullName){
                    //
                    window.location.href="pkg.html?pkgFullName="+pkgFullName;
                }




            }
        });

    </script>
</body>
</html>